<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/backstage/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/backstage/css/admin.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script th:src="@{/backstage/js/jquery.js}"></script>
    <script th:src="@{/backstage/js/pintuer.js}"></script>

    <script>
        $(function () {
            // 给提交按钮添加单击事件
            $("#edit-btn").click(function () {
                // 收集参数
                let id = $("#id").val().trim();
                let name = $("#name").val().trim();
                let state = $("input[name='state']:checked").val();
                // 表单验证
                if (name == "") {
                    alert("栏目名不能为空");
                    return;
                }
                // 发送请求
                $.post(
                    '/backstage/column/edit',
                    {
                        columnId: id,
                        columnName: name,
                        columnState: state
                    },
                    function (data) {
                        if (data.code == "1") {
                            //跳转栏目展示列表
                            window.location.href = '/backstage/column/list';
                        } else {
                            //提示信息
                            alert(data.message);
                        }
                    }
                );
            });
        })
    </script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head">
        <strong><span class="bi bi-pen"></span>修改栏目</strong>
    </div>
    <div class="body-content">
        <form class="form-x">
            <input id="id" type="hidden" th:value="${column.columnId}"/>
            <div class="form-group">
                <div class="label">
                    <label>栏目名：</label>
                </div>
                <div class="field">
                    <input id="name" th:value="${column.columnName}" type="text" class="input w50"
                           placeholder="请输入栏目名"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>状态：</label>
                </div>

                <div class="field" th:if="${column.columnState=='1'}">
                    <input type="radio" value="1" name="state" checked/>启用
                    <input type="radio" value="0" name="state"/>禁用
                </div>
                <div class="field" th:if="${column.columnState=='0'}">
                    <input type="radio" value="1" name="state"/>启用
                    <input type="radio" value="0" name="state" checked/>禁用
                </div>


            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button id="edit-btn" class="button bg-main bi bi-check" type="button"> 提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>